<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="../../dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            {{reversedMessage}}
            <hr />
        </div>

        <script>
            const vm = new Vue({
                el: '#app',
                data: {
                    message: 'hello vue',
                    user: {
                        firstName: '欧阳',
                        lastName: '春',
                        fullName: ''
                    }
                },
                computed: {
                    reversedMessage: function () {
                        return this.message.split('').reverse().join('');
                    }
                },
                watch: {
                    user: {
                        handler: function (newValue, oldValue) {
                            this.user.fullName = newValue.firstName + '   ' + newValue.lastName;
                        },
                        immediate: true,
                        deep: true
                    }
                }
            });
        </script>
    </body>
</html>
